import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Card, Form, Row, Col, Divider, Input, Button, message, Collapse } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';
import { getParamUrl } from '../../utils/formatDataSource';
const FormItem = Form.Item;
const Panel = Collapse.Panel;
@connect(({ lesson3, loading }) => ({
  lesson:lesson3,
  loading: loading.models.lesson3,
}))
@Form.create()
class LessonFeedBack extends PureComponent {
  constructor(props) {
    super(props);
    this.LessonHandleSubmit = this.LessonHandleSubmit.bind(this);
    this.StudentHandleSubmit = this.StudentHandleSubmit.bind(this);
    this.finishFeedBack = this.finishFeedBack.bind(this);
  }
  componentDidMount() {
    const { dispatch, location: { search } } = this.props;
    const params = getParamUrl(search);
    dispatch({
      type: 'lesson3/getLessonFeedBackInfo',
      payload: params,
    });

    dispatch({
      type: 'lesson3/getStudentFeedBackInfo',
      payload: params,
    });
    this.setState({
      lessonId: params.lessonId,
    });
  }
  LessonHandleSubmit(e) {
    const { dispatch, form } = this.props;
    const { lessonFeedBackVo = {} } = this.props.lesson;
    e.preventDefault();
    dispatch({
      type: 'lesson3/saveLessonInfo',
      payload: {
        id: lessonFeedBackVo.id,
        lessonId: this.state.lessonId,
        lessonContent: form.getFieldValue('lessonContent'),
        lessonHomeWork: form.getFieldValue('lessonHomeWork'),
        nextLessonContent: form.getFieldValue('nextLessonContent'),
      },
    });
  }
  StudentHandleSubmit(e) {
    const { dispatch, form } = this.props;
    const { lessonFeedBackVo = {}, studentFeedBackVo = [] } = this.props.lesson;
    // if(!form.getFieldValue("comment")||!form.getFieldValue("lessonAttitude")||!form.getFieldValue("answerAttitude")){
    //   message.warn("请填写完整",3);
    //   return;
    // }
    // if(!form.getFieldValue("lessonNote") ||!form.getFieldValue("lessonDoSubjectInfo") ||!form.getFieldValue("knowledgeGetRate")){
    //   message.warn("请填写完整",3);
    //   return;
    // }

    dispatch({
      type: 'lesson3/saveFeedBackDetail',
      payload: {
        id: form.getFieldValue('detailId'),
        feedBackId: lessonFeedBackVo.id,
        lessonId: this.state.lessonId,
        studentId: form.getFieldValue('studentId'),
        finishRate: form.getFieldValue('finishRate'),
        correctRate: form.getFieldValue('correctRate'),
        comment: form.getFieldValue('comment'),
        lessonAttitude: form.getFieldValue('lessonAttitude'),
        answerAttitude: form.getFieldValue('answerAttitude'),
        lessonNote: form.getFieldValue('lessonNote'),
        lessonDoSubjectInfo: form.getFieldValue('lessonDoSubjectInfo'),
        knowledgeGetRate: form.getFieldValue('knowledgeGetRate'),
        advantage: form.getFieldValue('advantage'),
        disadvantage: form.getFieldValue('disadvantage'),
        otherMark: form.getFieldValue('otherMark'),
      },
    });
  }
  finishFeedBack() {
    const { dispatch, form } = this.props;
    dispatch({
      type: 'lesson3/finishFeedBackAction',
      payload: {
        lessonId: this.state.lessonId,
      },
    });
  }

  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    const { lessonFeedBackVo = {}, studentFeedBackVo = [] } = this.props.lesson;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Row>
            <Col span={8} />
            <Col span={8} push={12} style={{ textAglin: 'right' }}>
              <Button type="primary" onClick={this.finishFeedBack}>
                完成评价
              </Button>
            </Col>
          </Row>
          <Form layout="vertical" onSubmit={this.LessonHandleSubmit}>
            <FormItem label="上课内容">
              {getFieldDecorator('lessonContent', {
                initialValue: lessonFeedBackVo.lessonContent,
                rules: [{ required: true, message: '请填写上课内容' }],
              })(<Input placeholder="请填写上课内容" />)}
            </FormItem>
            <FormItem label="作业布置">
              {getFieldDecorator('lessonHomeWork', {
                initialValue: lessonFeedBackVo.lessonHomeWork,
                rules: [{ required: true, message: '请填写作业布置内容' }],
              })(<Input placeholder="请填写作业布置内容" />)}
            </FormItem>
            <FormItem label="下次课程">
              {getFieldDecorator('nextLessonContent', {
                initialValue: lessonFeedBackVo.nextLessonContent,
                rules: [{ required: true, message: '请填写下节课内容' }],
              })(<Input placeholder="请填写下节课内容" />)}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">
                保 存
              </Button>
            </FormItem>
          </Form>
        </Card>
        <Divider />
        <Collapse accordion>
          {studentFeedBackVo.map((item, i) => (
            <Panel
              detailId={item.detailId}
              studentId={item.studentId}
              key={item.studentId}
              header={item.name + '----' + item.classLevel}
            >
              <Form layout="vertical" id={item.studentId} onSubmit={this.StudentHandleSubmit}>
                <FormItem label="作业完成度">
                  {getFieldDecorator('finishRate', {
                    initialValue: item.finishRate,
                    rules: [{ required: true, message: '请填写作业完成度' }],
                  })(<Input placeholder="请填写作业完成度" />)}
                </FormItem>
                <FormItem label="作业准确率">
                  {getFieldDecorator('correctRate', {
                    initialValue: item.correctRate,
                    rules: [{ required: true, message: '请填写作业准确率' }],
                  })(<Input placeholder="请填写作业准确率" />)}
                </FormItem>
                <FormItem label="作业评价">
                  {getFieldDecorator('comment', {
                    initialValue: item.comment,
                    rules: [{ required: true, message: '请填写作业评价' }],
                  })(<Input placeholder="请填写作业评价" />)}
                </FormItem>
                <FormItem label="上课态度">
                  {getFieldDecorator('lessonAttitude', {
                    initialValue: item.lessonAttitude,
                    rules: [{ required: true, message: '请填写上课态度' }],
                  })(<Input placeholder="请填写上课态度" />)}
                </FormItem>
                <FormItem label="回答问题">
                  {getFieldDecorator('answerAttitude', {
                    initialValue: item.answerAttitude,
                    rules: [{ required: true, message: '请填写回答问题' }],
                  })(<Input placeholder="answerAttitude" />)}
                </FormItem>
                <FormItem label="记笔记">
                  {getFieldDecorator('lessonNote', {
                    initialValue: item.lessonNote,
                    rules: [{ required: true, message: '请填写作业记笔记' }],
                  })(<Input placeholder="请填写作业记笔记" />)}
                </FormItem>
                <FormItem label="课堂做题情况">
                  {getFieldDecorator('lessonDoSubjectInfo', {
                    initialValue: item.lessonDoSubjectInfo,
                    rules: [{ required: true, message: '请填写课堂做题情况' }],
                  })(<Input placeholder="请填写课堂做题情况" />)}
                </FormItem>
                <FormItem label="知识掌握程度">
                  {getFieldDecorator('knowledgeGetRate', {
                    initialValue: item.knowledgeGetRate,
                    rules: [{ required: true, message: '请填写知识掌握程度' }],
                  })(<Input placeholder="请填写知识掌握程度" />)}
                </FormItem>
                <FormItem label="优点">
                  {getFieldDecorator('advantage', { initialValue: item.advantage })(
                    <Input placeholder="优点" />
                  )}
                </FormItem>
                <FormItem label="不足">
                  {getFieldDecorator('disadvantage', { initialValue: item.disadvantage })(
                    <Input placeholder="不足" />
                  )}
                </FormItem>
                <FormItem label="备注">
                  {getFieldDecorator('otherMark', { initialValue: item.otherMark })(
                    <Input placeholder="备注" />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('studentId', { initialValue: item.studentId })(
                    <Input type="hidden" />
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('detailId', { initialValue: item.detailId })(
                    <Input type="hidden" placeholder="detailId" />
                  )}
                </FormItem>
                <FormItem>
                  <Button type="primary" htmlType="submit">
                    保 存
                  </Button>
                </FormItem>
              </Form>
            </Panel>
          ))}
        </Collapse>
      </PageHeaderLayout>
    );
  }
}

export default LessonFeedBack;
